<template>
  <div class="stateWrapper" >
    <!--        信号强度-->
    <div class="signalWrap text-right pr-3">
      <i class="iconfont icontrue mr-1 font22" :class="{'online':ecc.Online==1,'unonline':ecc.Online==0}"></i>
<!--      <i class="iconfont icon-signal3"></i>-->
      <span class="iconfont icon-signal0 mr-2" v-if="Signal.SignalStrength==0||ecc.Online==0"></span>
      <span class="iconfont icon-signal1 mr-2"
            v-else-if="0<Signal.SignalStrength&&Signal.SignalStrength<=8"></span>
      <span class="iconfont icon-signal2 mr-2"
            v-else-if="8<Signal.SignalStrength&&Signal.SignalStrength<=16"></span>
      <span class="iconfont icon-signal3 mr-2"
            v-else-if="16<Signal.SignalStrength&&Signal.SignalStrength<=24"></span>
      <span class="iconfont icon-signal4 mr-2" v-else></span>
    </div>

    <div class="position-relative pl-3">
      <div class="titleGroup mb-2">
        <label class="txt">名称</label><label>{{box.Name}}</label>
      </div>
      <div class="titleGroup mb-2">
        <label class="txt">UID</label><label>{{box.Addr}}</label>
      </div>
      <div class="titleGroup mb-2">
        <label class="txt">最后通讯时间</label><label>{{ecc.UpTime}}</label>
      </div>
      <!--电能-->
      <div class="energy_badge d-flex position-absolute" style="right: 25px;bottom: 5px;">
        <i class="iconfont icon-shandian mr-0 mt-1"></i>
        <h2 class="mr-2">{{ecc.P}}</h2>
        <span style="line-height: 45px;">kW</span>
      </div>
    </div>

    <el-table class="mx-auto my-4" :data="UIList" tooltip-effect="dark" style="width: 360px;" :height="165" >
      <el-table-column  prop="phase" label="相位" align="center" >
        <template slot-scope="scope">
          {{['A','B','C'][scope.$index]}}
        </template>
      </el-table-column>
      <el-table-column  prop="I" label="电流(A)" align="center"></el-table-column>
      <el-table-column  prop="U" label="电压(V)" align="center"></el-table-column>
      <el-table-column  prop="P" label="功率(kw)" align="center" width="100"></el-table-column>
    </el-table>

    <!--版本号-->
    <div class="d-flex justify-content-between align-items-center px-3">
      <div class="titleGroup">
        <label class="txt">版本号</label>
        <label>{{Signal.SoftwareVersion?Signal.SoftwareVersion:'--'}}</label>
      </div>
      <el-button class="ur-btn iconTxt w100" @click="refreshData" :disabled="btnState" :class="{'refresh':!btnState}">
        <i class="iconfont icon-refresh font18"></i>刷新
      </el-button>
      <el-button class="ur-btn iconTxt w100 mr-4" @click="eccReboot" :disabled="btnState"  :class="{'reboot':!btnState}">
        <i class="iconfont icon-tuichu font18"></i>重启</el-button>
    </div>

    <!--灯杆统计-->
    <div class="poleCount pl-3 py-5 pr-5">
      <div class="d-flex align-items-center mr-4 ml-3">
        <i class="iconfont icon-pole"></i><label class="font22">{{countObj.PoleCount}}</label><span class="ml-2">个</span>
      </div>
      <div class="d-flex align-items-center">
        <i class="iconfont icon-deng state0"></i><label class="font22">{{countObj.OffCount}}</label>
      </div>
      <div class="d-flex align-items-center">
        <i class="iconfont icon-deng state1"></i><label class="font22">{{countObj.OnCount}}</label>
      </div>
      <div class="d-flex align-items-center">
        <i class="iconfont icon-deng state2"></i><label class="font22">{{countObj.AlarmCount}}</label>
      </div>
    </div>
  </div>
</template>

<script>
  import api from 'api/api'
  import {mapState} from 'vuex'

  export default {
    components: {},
    props: {
      box:{
        type:Object,
        default:{}
      },
    },
    data() {
      return {
        UIList:[],
        countObj:{PoleCount:0,OffCount:0,OnCount:0,AlarmCount:0},
        Signal: {SignalStrength: 0,SoftwareVersion:'--'},
        ecc:{}
      }
    },
    watch: {
      box:{
        handler(newValue, oldValue) {
          this.box = newValue
          this.queryEccDetail()
        },
        deep: true
      }
    },
    computed: {
      ...mapState({
        btnState: state => state.user.btnState,
      })
    },
    methods: {
      queryEccDetail(){
        api.fetchSimple('/ViewInfo/QueryEccDetail',{boxId:this.box.BoxId})
            .then(r=>{
              this.countObj=r
              this.ecc = r.EccDetail
              this.$set(this.Signal,'SignalStrength',r.EccDetail.LastSignal)
              let o=['a', 'b', 'c']
              this.UIList=[]
              for(let i=0;i<o.length;i++){
                this.UIList.push({U: this.ecc['U' + o[i]], I: this.ecc['I' +  o[i]], P: this.ecc['P' +  o[i]]})
              }
              this.UIList.splice(0,0)
            })
      },
      //信号强度查询
      loadSignal () {
        api.fetchSimple('/Communication/GetVersion',{EccAddr:this.box.Addr})
            .then(r=>{
              if(r.CmdState==0){
                this.Signal = r
              }
            })
      },
      //电压电流信息
      GetEccRealData() {
        api.fetchSimple('/Communication/EccRealData?EccAddr=' + this.box.Addr)
            .then(r => {
              this.$store.commit('user/SET_BTN_STATE',false)
              if(r.CmdState==0){
                this.UIList = []
                let o = ['a', 'b', 'c']
                o.map(v => {
                  this.UIList.push({U: r['U' + v], I: r['I' + v], P: r['P' + v]})
                })
                this.$set(this.ecc,'P',r.P)
                this.$set(this.ecc,'UpTime',api.formatDate(new Date(),'yyyy-MM-dd HH:mm:ss'))
              }else{
                this.$message.error({showClose:true,message:this.global.cmdStatus[r.CmdState]})
              }
            })
      },
      refreshData(){
        this.$store.commit('user/SET_BTN_STATE',true)
        this.loadSignal()
        this.GetEccRealData()
      },
      eccReboot(){
        this.$store.commit('user/SET_BTN_STATE',true)
        api.fetchSimple('/Communication/EccReboot',{EccAddr:this.box.Addr})
            .then(r=>{
              this.$store.commit('user/SET_BTN_STATE',false)
              if(r.CmdState==0){
                this.$message.success({showClose:true,message:'重启成功'})
              }else{
                this.$message.error({showClose:true,message:'重启失败'})
              }
            })
      }
    },
    created() {
      this.$store.commit('user/SET_BTN_STATE',false)
      this.queryEccDetail()
    },
    mounted() {
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus">
  .stateWrapper{
    .online{text-shadow: 0 0 6px rgba(129,246,255,0.5);color:#81D862;}
    .unonline{color:#e72424; text-shadow: #ee0603 0px 0px 6px;}
    .refresh_disabled,.reboot_disabled{color:#565E76;}
    .refresh {
      i{color:#81D862;text-shadow:0 0 6px #81F6FF;}
    }
    .reboot{
      i{color: #E72424;text-shadow: 0 0 6px #EE0603}
    }
  }
</style>
